<template>
  <div style="width: 100%;display: flex;flex-wrap: wrap;margin-bottom: 50px;border-bottom: 1px solid rgba(203,203,203,0.47);padding-bottom: 40px">
    <!--    头像，名称，时间-->
    <div style="display: flex;height: 60px;width: 100%;align-items: center">
      <div style="width: 10%;display: flex;justify-content: center;">
        <el-avatar :size="45" :src="`http://${filePath}:9999/files/`+comment.avatar">{{ comment.userName }}</el-avatar>
      </div>
      <div style="width: 90%;height: 100%;margin-left: 5px;display: flex;flex-wrap: wrap;align-content: space-around">
        <!--        名称-->
        <div style="width: 100%;font-size: 18px;font-weight: bold;color: rgba(33,33,33,0.91);display: flex;align-items: center">
          <div>
            {{ obfuscateUsername(comment.userName) }}
          </div>
          <div style="margin-left: 20px;">
            <el-rate v-model="comment.rate"
                     disabled
                     show-score
                     text-color="#ff9900"
                     score-template="{value}"></el-rate>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-start;width: 100%;align-items: center">
          <div style="width: 15%;color: #797979">尺码: {{ JSON.parse(comment.detail).size }}</div>
          <div style="width: 15%;color: #797979">颜色: {{ JSON.parse(comment.detail).color }}</div>
          <div style="width: 25%;color: #797979;font-size: 13px;margin-left: auto">{{ comment.commentTime }}</div>
        </div>
      </div>
    </div>
    <div style="width: 90%;margin-left: 10%;letter-spacing: 1px;margin-top: 10px;font-size: 15px;color: #29292a">{{ comment.content }}</div>
  </div>
</template>

<script>
import { proFilePath } from '../../utils/filePath';
export default {
  name: "CommentCard",
  props: {
    comment: {
      type: Object,
      default: {
        avatar: '',
        content: '好看舒适百搭透气凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数' +
            '凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数',
        commentTime: '2024-01-01 12:30:06',
        username: 'user',
        //具体商品
        detail: '回力帆布鞋 颜色：黑色 尺码：40码',
        rate: 5,
      }
    }
  },
  data() {
    return {
      filePath:proFilePath
    }
  },
  created(){
    console.log(this.comment)
  },
  methods: {
    //用户名脱敏处理
    obfuscateUsername(username) {
      if (typeof username !== 'string' || username.length < 2) {
        // 如果用户名不是字符串或长度小于2，则返回原始用户名或适当的提示
        return username || '无效用户名';
      }
      // 获取第一个和最后一个字符
      const firstChar = username[0];
      const lastChar = username[username.length - 1];
      // 如果用户名长度大于2，则用'*'替换中间的字符
      if (username.length > 2) {
        // '*' 的数量是用户名长度减去2（因为我们已经保留了第一个和最后一个字符）
        const stars = '*'.repeat(username.length - 2);
        return firstChar + stars + lastChar;
      }
      // 如果用户名长度恰好为2，则直接返回原始用户名
      return username;
    }
  }
}
</script>

<style>

</style>